<link rel="stylesheet" href="lib/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
<style type="text/css">

</style>
<div id="layui-container" class="layui-anim layui-anim-downbit">
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">输入框</label>
            <div class="layui-input-inline">
                <input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>
    <table class="layui-hide" id="data-table" lay-filter="dataTable"></table>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
    </div>
</script>
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="updatePermissions">修改权限</a>
    <a class="layui-btn layui-btn-xs" lay-event="openDialog">修改</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="deleteItems">删除</a>
</script>
<script type="text/javascript" src="lib/jquery/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="lib/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript">
    layui.use(['form', 'table'], function () {
        let form = layui.form;
        let table = layui.table;
        let laytpl = layui.laytpl;
        table.render({
            elem: '#data-table',
            url: api.allRoles,
            method: 'post',
            contentType: 'application/json',
            //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            cellMinWidth: 80,
            page: true,
            limit: 15,
            limits: [15, 30, 45, 60],
            cols: [[
                {type: "checkbox", width: 50},
                {field: '', title: '序号', type: 'numbers'},
                {field: 'id', title: 'ID', width: 180},
                {field: 'orgName', title: '企业名称', width: 240},
                {field: 'roleName', title: '角色名称', width: 150},
                {field: 'roleSignName', title: '业务角色标识', width: 150},
                {field: 'roleTypeName', title: '角色类型', width: 150},
                {field: 'roleDataAuthName', title: '角色数据权限'},
                {field: '', templet: '#tableBar', title: '操作', width: 230}
            ]],
            request: {
                pageName: "currentPage",
                limitName: "pageSize"
            },
            toolbar: '#toolbarDemo'
        });

        let active = {
            add: function (data) {
                console.log(data);
                layer.msg('添加');
            },
            updatePermissions: function (data) {
                request.bodyAjax(api.itemChecked, {statusId: data.id}, function (res) {
                    if (res.status === 200) {
                        let tpl = document.getElementById("itemStatusForm").innerHTML;
                        laytpl(tpl).render({}, function (html) {
                            layer.open({
                                type: 1,
                                content: html,
                                title: '[<font color="blue">' + data.dicValue + '</font>]的权限',
                                area: ['300px', '750px'],
                                maxmin: false,
                                shade: 0.3,
                                btn: ['展开/折叠', '保存', '关闭'],
                                yes: function () {
                                    let treeObj = $.fn.zTree.getZTreeObj("item-status-tree");
                                    treeObj.expandAll(flag);
                                    flag = !flag;
                                },
                                btn2: function (index, layero) {
                                    let loadingIndex = layer.load();
                                    let treeObj = $.fn.zTree.getZTreeObj("item-status-tree");
                                    let nodes = treeObj.getCheckedNodes(true);
                                    let checkData = [];
                                    for (let i = 0; i < nodes.length; i++) {
                                        checkData.push(nodes[i].id);
                                    }
                                    let params = {statusId: data.id, itemIds: checkData};
                                    request.bodyAjax(api.updateRelation, params, function (res2) {
                                        if (res2.code === 200) {
                                            layer.close(index);
                                        } else {
                                            layer.msg(res2.message);
                                        }
                                        layer.close(loadingIndex);
                                    });
                                }
                            });
                            let setting = {
                                data: {
                                    key: {
                                        name: 'operaName'
                                    },
                                    simpleData: {
                                        enable: true,
                                        idKey: 'id',
                                        pIdKey: 'parentId'
                                    }
                                },
                                check: {
                                    enable: true,
                                    chkStyle: "checkbox",
                                    chkboxType: {"Y": "ps", "N": "s"}
                                },
                                callback: {
                                    beforeClick: function (treeId, treeNode) {
                                        var zTree = $.fn.zTree.getZTreeObj(treeId);
                                        if (treeNode.isParent) {
                                            zTree.expandNode(treeNode);
                                        }
                                        return true;
                                    }
                                }
                            };
                            $.fn.zTree.init($("#item-status-tree"), setting, res.data);
                            let treeObj = $.fn.zTree.getZTreeObj("item-status-tree");
                            treeObj.expandAll(true);
                        });
                        return;
                    }
                    layer.msg(res.message);
                });
            }
        };

        //触发事件
        table.on('toolbar(dataTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            if (active[obj.event]) {
                active[obj.event](obj);
            }
        });

        // 表格管理操作列的点击
        table.on('tool(dataTable)', function (obj) {
            let layEvent = obj.event;
            let action = active[layEvent];
            if (action) {
                action(obj.data);
            }
        });
    });
</script>
